---
categories: [Widgets]
layout: page
title: Popovers
resource: true
---
      <p>Note: To display the close (X) icon in popovers, add data attribute <strong>data-close="true"</strong> to the trigger button element.</p>
      <div class="bs-example" style="margin-top: 40px;" id="popover-right-title-close">
        <a href="#" class="btn btn-default" data-toggle="popover" data-html="true" title="Popover on right with title and close button" data-content="This is more information about a smartproxy. This is more information about a smartproxy. This is more information about a smartproxy. This is more information about a smartproxy." data-close="true">Popover on right with title and close button</a>
      </div>
      <div class="bs-example" style="margin-top: 40px;" id="popover-right-close">
        <a href="#" class="btn btn-default" data-toggle="popover" data-html="true" title="" data-content="Close icon with no Title text. This is more information about a smartproxy. This is more information about a smartproxy. This is more information about a smartproxy." data-close="true">Popover on right with close button</a>
      </div>
      <div class="bs-example" style="margin: 40px 0;" id="popover-right-title">
        <a href="#" class="btn btn-default" data-toggle="popover" data-html="true" title="Popover on right with title" data-content="Popover with no Close icon.<br>This is more information about a smartproxy. This is more information about a smartproxy. This is more information about a smartproxy.">Popover on right with title</a>
      </div>
      <div class="bs-example" style="margin: 40px 0;" id="popover-right">
        <a href="#" class="btn btn-default" data-toggle="popover" data-html="true" title="" data-content="Empty Title example.<br>This is more information about a smartproxy. This is more information about a smartproxy. This is more information about a smartproxy.">Popover on right</a>
      </div>
      <hr>
      <div class="bs-example" style="margin-top: 40px;" id="popover-left-title-close">
        <a href="#" class="btn btn-default" data-toggle="popover" data-html="true" title="Popover on left with title and close button" data-content="This is more information about a smartproxy. This is more information about a smartproxy. This is more information about a smartproxy. This is more information about a smartproxy." data-close="true" data-placement="left">Popover on left with title and close button</a>
      </div>
      <div class="bs-example" style="margin-top: 40px;" id="popover-left-close">
        <a href="#" class="btn btn-default" data-toggle="popover" data-html="true" title="" data-content="Close icon with no Title text. This is more information about a smartproxy. This is more information about a smartproxy. This is more information about a smartproxy." data-close="true" data-placement="left">Popover on left with close button</a>
      </div>
      <div class="bs-example" style="margin: 40px 0;" id="popover-left-title">
        <a href="#" class="btn btn-default" data-toggle="popover" data-html="true" title="Popover on left with title" data-content="Popover with no Close icon.<br>This is more information about a smartproxy. This is more information about a smartproxy. This is more information about a smartproxy." data-placement="left">Popover on left with title</a>
      </div>
      <div class="bs-example" style="margin: 40px 0;" id="popover-left">
        <a href="#" class="btn btn-default" data-toggle="popover" data-html="true" title="" data-content="Empty Title example.<br>This is more information about a smartproxy. This is more information about a smartproxy. This is more information about a smartproxy." data-placement="left">Popover on left</a>
      </div>
      <hr>
      <div class="bs-example" style="margin-top: 40px;" id="popover-top-title-close">
        <a href="#" class="btn btn-default" data-toggle="popover" data-html="true" title="Popover on left with title and close button" data-content="This is more information about a smartproxy. This is more information about a smartproxy. This is more information about a smartproxy. This is more information about a smartproxy." data-close="true" data-placement="top">Popover on top with title and close button</a>
      </div>
      <div class="bs-example" style="margin-top: 40px;" id="popover-top-close">
        <a href="#" class="btn btn-default" data-toggle="popover" data-html="true" title="" data-content="Close icon with no Title text. This is more information about a smartproxy. This is more information about a smartproxy. This is more information about a smartproxy." data-close="true" data-placement="top">Popover on top with close button</a>
      </div>
      <div class="bs-example" style="margin: 40px 0;" id="popover-top-title">
        <a href="#" class="btn btn-default" data-toggle="popover" data-html="true" title="Popover on top with title" data-content="Popover with no Close icon.<br>This is more information about a smartproxy. This is more information about a smartproxy. This is more information about a smartproxy." data-placement="top">Popover on top with title</a>
      </div>
      <div class="bs-example" style="margin: 40px 0;" id="popover-top">
        <a href="#" class="btn btn-default" data-toggle="popover" data-html="true" title="" data-content="Empty Title example.<br>This is more information about a smartproxy. This is more information about a smartproxy. This is more information about dataa smartproxy." data-placement="top">Popover on top</a>
      </div>
      <hr>
      <div class="bs-example" style="margin-top: 40px;" id="popover-bottom-title-close">
        <a href="#" class="btn btn-default" data-toggle="popover" data-html="true" title="Popover on left with title and close button" data-content="This is more information about a smartproxy. This is more information about a smartproxy. This is more information about a smartproxy. This is more information about a smartproxy." data-close="true" data-placement="bottom">Popover on bottom with title and close button</a>
      </div>
      <div class="bs-example" style="margin-top: 40px;" id="popover-bottom-close">
        <a href="#" class="btn btn-default" data-toggle="popover" data-html="true" title="" data-content="Close icon with no Title text. This is more information about a smartproxy. This is more information about a smartproxy. This is more information about a smartproxy." data-close="true" data-placement="bottom">Popover on bottom with close button</a>
      </div>
      <div class="bs-example" style="margin: 40px 0;" id="popover-bottom-title">
        <a href="#" class="btn btn-default" data-toggle="popover" data-html="true" title="Popover on bottom with title" data-content="Popover with no Close icon.<br>This is more information about a smartproxy. This is more information about a smartproxy. This is more information about a smartproxy." data-placement="bottom">Popover on bottom with title</a>
      </div>
      <div class="bs-example" style="margin: 40px 0;" id="popover-bottom">
        <a href="#" class="btn btn-default" data-toggle="popover" data-html="true" title="" data-content="Empty Title example.<br>This is more information about a smartproxy. This is more information about a smartproxy. This is more information about a smartproxy." data-placement="bottom">Popover on bottom</a>
      </div>
      <hr>
      {% include widgets/forms/field-level-help.html id="fieldlevelhelp" %}
